<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<!DOCTYPE html>
<html lang="en">
	<body class="no-skin">
		<div id="messageDiv">
			<c:if test="${not empty  message }">
				<script type="text/javascript">
					alert('${message}');
				</script>
			</c:if>
		</div>
		<!-- #section:basics/navbar.layout -->
		
		<div class="modal fade" id="showTestModal" tabindex="-1" role="dialog" aria-labelledby="showTestModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="model-title" id="showTestModalLabel">
							查看详细试题
						</h4>
					</div>
					<div class="modal-body">
						<label>题号:&nbsp;&nbsp;</label><span class="sub-id"></span><br/>
						<label>试题科目:&nbsp;&nbsp;</label><span class="sub-name"></span><br/>
						<label>题目:&nbsp;&nbsp;</label><span class="content"></span><br/>
						<label>A:&nbsp;&nbsp;</label><span class="choose-a"></span><br/>
						<label>B:&nbsp;&nbsp;</label><span class="choose-b"></span><br/>
						<label>C:&nbsp;&nbsp;</label><span class="choose-c"></span><br/>
						<label>D:&nbsp;&nbsp;</label><span class="choose-d"></span><br/>
						<label style="font-weight: bold;">答案:&nbsp;&nbsp;</label><span class="answer" style="font-weight: bold;"></span>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		
		</div>
		
		
		<div class="modal fade" id="editTestModal" tabindex="-1" role="dialog" aria-labelledby="editTestModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="model-title" id="addTestModalLabel">
							更改试题
						</h4>
					</div>
					<div class="modal-body">
						<form id="editTestForm" method="POST">
						<label>题号:&nbsp;&nbsp;</label><span class="sub-id"></span><br/>
						<label>试题科目:&nbsp;&nbsp;</label><select class="select_subId" name="select_subId">
						<c:forEach items="${subjectList }" var="subject" >
							<option value="${subject.id }">${subject.name }</option>
						</c:forEach>
						</select><br/>
						<label>试题类型:&nbsp;&nbsp;</label><select class="select_testType" name="select_testType" >
						<c:forEach items="${testTypeList }" var="examTestType" >
						<option value="${examTestType.id }">${examTestType.testType }</option>
						</c:forEach>
						</select><label class="testTypeScore"></label><br/>
						<label>题干:&nbsp;&nbsp;</label><textarea name="content" rows="8" cols="50" placeholder="填写题目内容"></textarea><br/>
						<label>A:&nbsp;&nbsp;</label><input type="text" name="chooseA" placeholder="填写候选答案内容,作为选项A." /><br/>
						<label>B:&nbsp;&nbsp;</label><input type="text" name="chooseB" placeholder="填写候选答案内容,作为选项B." /><br/>
						<label>C:&nbsp;&nbsp;</label><input type="text" name="chooseC" placeholder="填写候选答案内容,作为选项C." /><br/>
						<label>D:&nbsp;&nbsp;</label><input type="text" name="chooseD" placeholder="填写候选答案内容,作为选项D." /><br/>
						<label style="font-weight: bold;">答案:&nbsp;&nbsp;</label><span class="answerTotal">
							<input type="radio" name = "answer" value="A" checked="checked" class="type1" />选项A
							<input type="radio" name = "answer" value="B" class="type1" />选项B
							<input type="radio" name = "answer" value="C" class="type1" />选项C
							<input type="radio" name = "answer" value="D" class="type1" />选项D
						</span>
						</form>
					</div>
					
					<div class="modal-footer">
						<button type="button" class="btn btn-default saveEditTestBtn" data-dismiss="modal">更改</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
					
				</div>
			</div>
		
		</div>

		
		
		<div class="modal fade" id="addTestModal" tabindex="-1" role="dialog" aria-labelledby="addTestModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="model-title" id="addTestModalLabel">
							添加试题
						</h4>
					</div>
					<div class="modal-body">
						<form id="addTestForm" method="POST">
						
						<label>试题科目:&nbsp;&nbsp;</label><select class="select_subId" name="select_subId">
						<c:forEach items="${subjectList }" var="subject" >
							<option value="${subject.id }">${subject.name }</option>
						</c:forEach>
						</select><br/>
						<label>试题类型:&nbsp;&nbsp;</label><select class="select_testType" name="select_testType" >
						<c:forEach items="${testTypeList }" var="examTestType" >
						<option value="${examTestType.id }">${examTestType.testType }</option>
						</c:forEach>
						</select><label class="testTypeScore"></label><br/>
						<label>题干:&nbsp;&nbsp;</label><textarea name="content" rows="8" cols="50" placeholder="填写题目内容"></textarea><br/>
						<label>A:&nbsp;&nbsp;</label><input type="text" name="chooseA" placeholder="填写候选答案内容,作为选项A." /><br/>
						<label>B:&nbsp;&nbsp;</label><input type="text" name="chooseB" placeholder="填写候选答案内容,作为选项B." /><br/>
						<label>C:&nbsp;&nbsp;</label><input type="text" name="chooseC" placeholder="填写候选答案内容,作为选项C." /><br/>
						<label>D:&nbsp;&nbsp;</label><input type="text" name="chooseD" placeholder="填写候选答案内容,作为选项D." /><br/>
						<label style="font-weight: bold;">答案:&nbsp;&nbsp;</label><span class="answerTotal">
							<input type="radio" name = "answer" value="A" checked="checked" class="type1" />选项A
							<input type="radio" name = "answer" value="B" class="type1" />选项B
							<input type="radio" name = "answer" value="C" class="type1" />选项C
							<input type="radio" name = "answer" value="D" class="type1" />选项D
						</span>
						</form>
					</div>
					
					<div class="modal-footer">
						<button type="button" class="btn btn-default saveTestBtn" data-dismiss="modal">添加</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
					
				</div>
			</div>
		
		</div>

										<table id="sample-table-1" class="table table-striped table-bordered table-hover">
											<thead>
												<tr>
													
													<th>题号</th>
													<th>科目</th>
													<th class="hidden-480">题干</th>

													<th>
														<i class="ace-icon fa fa-clock-o bigger-110 hidden-480"></i>
														选项A
													</th>
													<th class="hidden-480">选项B</th>

													<th>选项C</th>
													<th>选项D</th>
													<th>答案</th>
													<th>题目类型</th>
													<th>题目分数</th>
													<th>操作</th>
												</tr>
											</thead>

											<tbody>
											<c:forEach items="${examTestVOList }" var="examTestVO">
												<tr>
													<td>${examTestVO.id }</td>
													<td>${examTestVO.subName }</td>
													<td>${examTestVO.content }</td>
													<td class="hidden-480">${examTestVO.chooseA }</td>
													<td>${examTestVO.chooseB }</td>

													<td class="hidden-480">
														${examTestVO.chooseC }
													</td>
													<td>
														${examTestVO.chooseD }
									
													</td>
													
													
													<td>${examTestVO.answer }</td>
													
													
													
													
													<td>${examTestVO.examTestType.testType }</td>
													<td>${examTestVO.examTestType.testTypeScore }</td>
													<td>
															<a title="查看试题" class="btn btn-primary btn-xs show-test">
																<i class="ace-icon fa fa-comment"></i>
															</a>
															
															<a title="更改试题" class="btn btn-primary btn-xs edit-test">
																<i class="ace-icon fa fa-pencil"></i>
															</a>
															
															<a title="删除试题" class="btn btn-primary btn-xs delete-test">
																<i class="ace-icon fa fa-trash-o"></i>
															</a>
															

														
													</td>
												</tr>
												</c:forEach>
											</tbody>
										</table>

				<script type="text/javascript">
				$('.show-test').click(function(){
					var testId = $(this).parent().siblings().eq(0).text();
					$.ajax({
						type:'POST',
						url:'${pageContext.request.contextPath}/getTestById',
						data:{
							testId:testId
							},
						dataType:'json',
						success:function(data){
							$('#showTestModal .sub-id').text(data.id);
							$('#showTestModal .sub-name').text(data.subName);
							$('#showTestModal .content').text(data.content);
							$('#showTestModal .test-type').text(data.examTestType.testType);
							$('#showTestModal .test-type-score').text(data.examTestType.testTypeScore);
							$('#showTestModal .choose-a').text(data.chooseA);
							$('#showTestModal .choose-b').text(data.chooseB);
							$('#showTestModal .choose-c').text(data.chooseC);
							$('#showTestModal .choose-d').text(data.chooseD);
							$('#showTestModal .answer').text(data.answer);
							}
						});	
					$('#showTestModal').modal('show');
					});
				
				$('.edit-test').click(function(){
					var testId = $(this).parent().siblings().eq(0).text();
					$.ajax({
						type:'POST',
						url:'${pageContext.request.contextPath}/getTestById',
						data:{
							testId:testId
							},
						dataType:'json',
						success:function(data){
							$('#editTestForm .sub-id').text(testId);
							$('#editTestForm select[name="select_subId"]').val(data.subId);
							$('#editTestForm select[name="select_testType"]').val(data.examTestType.id);
							$('#editTestForm textarea[name="content"]').text(data.content);
							$('#editTestForm input[name="chooseA"]').val(data.chooseA);
							$('#editTestForm input[name="chooseB"]').val(data.chooseB);
							$('#editTestForm input[name="chooseC"]').val(data.chooseC);
							$('#editTestForm input[name="chooseD"]').val(data.chooseD);
							$('.answerTotal').empty();
							if(data.examTestType.id == 1){
								$('.answerTotal').append("<input type='radio' name = 'answer' value='A' class='type1' />选项A");
								 $('.answerTotal').append("<input type='radio' name = 'answer' value='B' class='type1' />选项B");
								 $('.answerTotal').append("<input type='radio' name = 'answer' value='C' class='type1' />选项C");
								 $('.answerTotal').append("<input type='radio' name = 'answer' value='D'  class='type1' />选项D");
								 $('#editTestForm input[name="answer"][value="'+data.answer+'"]').attr("checked",true);
// 								 $("input[name=sex][value=´1´]").attr("checked",true);
								}
							if(data.examTestType.id == 2){
								$('.answerTotal').append("<input type='checkbox' name ='answer' value='A' class='type2'  />选项A");
						    	$('.answerTotal').append("<input type='checkbox' name ='answer' value='B' class='type2' />选项B");
						    	$('.answerTotal').append("<input type='checkbox' name ='answer' value='C' class='type2' />选项C");
						    	$('.answerTotal').append("<input type='checkbox' name ='answer' value='D' class='type2' />选项D");
						    	var answerString = data.answer;
						    	if(answerString.indexOf("A")>-1){
						    		$('#editTestForm input[name="answer"][value="A"]').attr("checked",true);
							    	}
						    	if(answerString.indexOf("B")>-1){
						    		$('#editTestForm input[name="answer"][value="B"]').attr("checked",true);
							    	}
						    	if(answerString.indexOf("C")>-1){
						    		$('#editTestForm input[name="answer"][value="C"]').attr("checked",true);
							    	}
						    	if(answerString.indexOf("D")>-1){
						    		$('#editTestForm input[name="answer"][value="D"]').attr("checked",true);
							    	}
								}
							
							}
						});
					
					$('#editTestModal').modal('show');
					
					});

				$('.saveEditTestBtn').click(function(){
					var id = $('#editTestForm .sub-id').text();
					var subId = $('#editTestForm select[name="select_subId"]').val();
					var testType = $('#editTestForm select[name="select_testType"]').val();
					var content = $('#editTestForm textarea[name="content"]').val();
					var chooseA = $('#editTestForm input[name="chooseA"]').val();
					var chooseB = $('#editTestForm input[name="chooseB"]').val();
					var chooseC = $('#editTestForm input[name="chooseC"]').val();
					var chooseD = $('#editTestForm input[name="chooseD"]').val();
					var answerString = '';
					if(testType == 1){
						answerString += $('#editTestForm input[name="answer"]:radio:checked').val();
						} else if(testType == 2){
							var array = $('#editTestForm input[name="answer"]:checkbox:checked');
							$.each(array,function(index, item){
								answerString += (index == 0 ? $(item).val() : (','+$(item).val()));
								});
							} else {
								alert("无效试题类型!");
								}
					$.ajax({
						type:'POST',
						url:'${pageContext.request.contextPath}/saveEditTest',
						data:{
							id:id,
							subId:subId,
							examTestTypeId:testType,
							content:content,
							chooseA:chooseA,
							chooseB:chooseB,
							chooseC:chooseC,
							chooseD:chooseD,
							answer:answerString
							},
							dataType:"json",
							success:function(data){
								if(data.success){
									alert('修改成功!');
									window.location.reload();
									} else {
										alert('修改失败!');
										}
								}
						});
					});
				
				$('.add-test').click(function(){
					$.ajax({
						type:'POST',
						url:'${pageContext.request.contextPath}/openAddTest',
						data:{
							},
						dataType:'json',
						success:function(data){
							}
						});
					$('#addTestModal').modal('show');
					});
				$('.saveTestBtn').click(function(){
					//验证通过后
					var subId = $('#addTestForm select[name="select_subId"]').val();
					var testType = $('#addTestForm select[name="select_testType"]').val();
					var content = $('#addTestForm textarea[name="content"]').val();
					var chooseA = $('#addTestForm input[name="chooseA"]').val();
					var chooseB = $('#addTestForm input[name="chooseB"]').val();
					var chooseC = $('#addTestForm input[name="chooseC"]').val();
					var chooseD = $('#addTestForm input[name="chooseD"]').val();
					var answerString = '';
					if(testType == 1){
						answerString += $('#addTestForm input[name="answer"]:radio:checked').val();
						} else if(testType == 2){
							var array = $('#addTestForm input[name="answer"]:checkbox:checked');
							$.each(array,function(index, item){
								answerString += (index == 0 ? $(item).val() : (','+$(item).val()));
								});
							} else {
								alert("无效试题类型!");
								}
					$.ajax({
						type:'POST',
						url:'${pageContext.request.contextPath}/addTest',
						data:{
							subId:subId,
							examTestTypeId:testType,
							content:content,
							chooseA:chooseA,
							chooseB:chooseB,
							chooseC:chooseC,
							chooseD:chooseD,
							answer:answerString
							},
							dataType:"json",
							success:function(data){
								if(data.success){
									alert('添加成功!');
									window.location.reload();
									} else {
										alert('添加失败!');
										}
								}
						});

					});
				
				
				$('.delete-test').click(function(){
					var testId = $(this).parent().siblings().eq(0).text();
					
					if(confirm("是否确认删除")){
						$.ajax({
							type:'POST',
							url:'${pageContext.request.contextPath}/deleteTest',
							data:{
								testId:testId
								},
							dataType:"json",
							success:function(data){
								if(data){
									alert("删除成功");
									window.location.reload();
									} else{
										alert("删除失败");
										}
								
							}
							});
						}

					});
				
// 				<input type="radio" name = "answer" value="A" checked="checked" class="type1" />
// 					选项A
// 					<input type="radio" name = "answer" value="B" class="type1" />
// 					选项B
// 					<input type="radio" name = "answer" value="C" class="type1" />
// 					选项C
// 					<input type="radio" name = "answer" value="D" class="type1" />
// 					选项D
				
				
				
				$(".select_testType").change(function(){
					$('.answerTotal').empty();
					var testType = $(this).val();
					//单选
					if(testType == 1){
						 $('.answerTotal').append("<input type='radio' name = 'answer' value='A' class='type1' />选项A");
						 $('.answerTotal').append("<input type='radio' name = 'answer' value='B' class='type1' />选项B");
						 $('.answerTotal').append("<input type='radio' name = 'answer' value='C' class='type1' />选项C");
						 $('.answerTotal').append("<input type='radio' name = 'answer' value='D' class='type1' />选项D");
						}

					//双选
				    if(testType == 2){
				    	$('.answerTotal').append("<input type='checkbox' name ='answer' value='A' class='type2' />选项A");
				    	$('.answerTotal').append("<input type='checkbox' name ='answer' value='B' class='type2' />选项B");
				    	$('.answerTotal').append("<input type='checkbox' name ='answer' value='C' class='type2' />选项C");
				    	$('.answerTotal').append("<input type='checkbox' name ='answer' value='D' class='type2' />选项D");
					    }
				    
				  });


				
				$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
				function tooltip_placement(context, source) {
					var $source = $(source);
					var $parent = $source.closest('table')
					var off1 = $parent.offset();
					var w1 = $parent.width();
					
					var off2 = $source.offset();
					//var w2 = $source.width();
			
					if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
					return 'left';
				}
			
		</script>

		<!-- the following scripts are used in demo only for onpage help and you don't need them -->
			</body>
</html>
